<template>
  <main-card-admin
    :title="`应用详情（${appInfo.name || ''})`"
    :crumbs="crumbs"
    :loading="loading"
    :screen-style-obj="computedScreenStyleObj"
  >
    <div class="details-content">
      <div class="review-card">
        <div class="card1">
          <div class="card1-item">
            <div class="item-title">用户名称</div>
            <div class="item-content" :title="appInfo.username">{{ appInfo.username }}</div>
          </div>
          <div class="card1-item">
            <div class="item-title">应用名称</div>
            <div class="item-content" :title="appInfo.name">{{ appInfo.name }}</div>
          </div>
          <div class="card1-item">
            <div class="item-title">申请时间</div>
            <div class="item-content" :title="appInfo.createTime">{{ appInfo.createTime }}</div>
          </div>
        </div>
        <div class="card2">
          <div class="row-title">应用描述</div>
          <div class="row-content" :title="appInfo.content">
            {{ appInfo.content || '/' }}
          </div>
        </div>
      </div>
      <information-form
        c-type="life"
        :audit-app-api="appInfo.auditAppApiVOList"
        :audit-app-sdk="appInfo.auditAppSdkVOList"
        @getClientInfo="getClientInfo()"
      />
    </div>
  </main-card-admin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import { clientApi } from '@/services/api'
  import InformationForm from '@/views/admin/app-check/components/InformationForm.vue'
  import { AuditDetails } from '@/views/admin/app-check/types'
  const route = useRoute()
  const { id } = route.params as { id: string }
  const crumbs = computed(() => {
    return [
      isAdmin.value
        ? {
            name: '管理员',
            path: '/user-manage/admin-list'
          }
        : {
            name: '普通用户',
            path: '/user-manage/student-list'
          },
      {
        name: `账号详情（${appInfo.value.username || ''}）`,
        path: `/user-manage/detail/${appInfo.value.uid}`
      },
      { name: `应用详情（${appInfo.value.name || ''})` }
    ]
  })
  const computedScreenStyleObj = computed(() => {
    return {
      padding: '0 32px 0 32px'
    }
  })
  const appInfo = ref<AuditDetails>({})

  const { loading, runAsync: getClientInfo } = useRequest<any>(clientApi.lifecycleDetailsType2(id), {
    onSuccess: res => {
      Object.assign(appInfo.value, res.data)
      getUserIsAdmin(appInfo.value.uid)
    },
    onError: () => {}
  })

  /* 用户详情-------------------------------------------------------------------- */
  const isAdmin = ref(false)

  /**
   * 获取用户是否管理员（用于更改面包屑）
   * @param id
   */
  const getUserIsAdmin = async (id: string) => {
    const { data } = await clientApi.detail(id)()
    isAdmin.value = data.roleType === 2
  }
</script>

<style lang="less" scoped>
  .details-content {
    position: relative;
    display: flex;
    padding: 20px 20px 32px;
    margin: 0 auto;
    width: 904px;
    background: #f5f5f5;
    border-radius: 8px;
    flex-direction: column;
    gap: 24px;

    .review-card {
      display: flex;
      align-items: flex-start;
      padding: 20px 20px 32px;
      width: 100%;
      background: #fff;
      border-radius: 8px;
      flex-direction: column;
      gap: 20px;

      .card1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 54px;
        flex-direction: row;
        gap: 20px;

        .card1-item {
          display: flex;
          justify-content: space-evenly;
          width: 200px;
          height: 100%;
          flex-direction: column;
          gap: 8px;

          .item-title {
            font-size: 14px;
            color: rgba(25, 25, 48, 0.45);
          }

          .item-content {
            overflow: hidden;
            width: 95%;
            height: 18px;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(16, 16, 20, 0.95);
          }
        }

        .item-w164 {
          width: 164px;
        }
      }

      .card2 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
        gap: 8px;
      }

      .row-title {
        height: 22px;
        font-size: 14px;
        color: rgba(25, 25, 48, 0.45);
        line-height: 22px;
      }

      .row-content {
        font-size: 16px;
        color: rgba(16, 16, 20, 0.95);
        line-height: 24px;
        word-break: break-all;
      }
    }

    .button-group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: 188px;
      gap: 12px;
      margin: 0 auto;
    }
  }
</style>
